import React, { useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { AtTabBar } from 'taro-ui'
import "taro-ui/dist/style/components/tab-bar.scss"
import "taro-ui/dist/style/components/badge.scss"
import "taro-ui/dist/style/components/icon.scss";
import './index.less'
import home1 from '../../assets/img/home1.png'
import home2 from '../../assets/img/home2.png'
import home3 from '../../assets/img/home3.png'
import home4 from '../../assets/img/home4.png'
import homeSelect1 from '../../assets/img/home-select1.png'
import homeSelect2 from '../../assets/img/home-select2.png'
import homeSelect3 from '../../assets/img/home-select3.png'
import homeSelect4 from '../../assets/img/home-select4.png'
import home from '../../assets/img/homeCenter.png'

export default (props: any) => {

    // 动态数据
    const [current, setCurrent] = useState(0)
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [navList, setNavList] = useState(['pages/index/index', 'pages/news/index', 'pages/active/index', 'pages/uBusiness/index', 'pages/my/index'])
    const [isIphoneX, setIsIphoneX] = useState(false)
    useDidShow(() => {
        setCurrent(navList.indexOf(Taro.getCurrentPages()[0].route))
        Taro.getSystemInfo({
            success: res => {
                if (res.safeArea.top > 20) {
                    setIsIphoneX(true)
                }
            }
        }).then()
    })
    //底部导航栏
    const handleClick = (val: any) => {

        if (val === 0) {
            Taro.switchTab({
                url: '/pages/index/index'
            })
        } else if (val === 1) {
            Taro.switchTab({
                url: '/pages/news/index'
            })
        } else if (val === 2) {
            Taro.switchTab({
                url: '/pages/active/index'
            })
        } else if (val === 3) {
            Taro.switchTab({
                url: '/pages/uBusiness/index'
            })
        } else if (val === 4) {
            Taro.switchTab({
                url: '/pages/my/index'
            })
        }
    }
    return (
        <AtTabBar
          className={isIphoneX ? 'headTabBar' : ''}
          fixed
          tabList={[
                { title: '首页', image: home1, selectedImage: homeSelect1 },
                { title: '消息', image: home2, selectedImage: homeSelect2 },
                { title: '', image: home, selectedImage: home },
                { title: '商城', image: home3, selectedImage: homeSelect3 },
                { title: '我的', image: home4, selectedImage: homeSelect4 }
            ]}
          onClick={handleClick}
          current={current}
        />
    );
};
